<template>
  <div>
    <div class="login_bc">
        <div v-if="!regSuccess" class="logo-form">
          <div class="form-item login_input">
            <div class="shadow-c">
              <div class="left ipt-img">
                <img src="../../../static/image/e_2.png">
              </div>
              <div class="ipt-box">
                <input type="text" v-model="mobile" placeholder="请输入手机号"/>
              </div>
              <div class="clear"></div>
            </div>
          </div>
          <div class="form-item">
            <div @click="getCode" :class="hasSend? 'has-send' : ''" class="right shadow-c get-code">
              {{ codeText }}
            </div>
            <div class="shadow-c auth-code">
              <div class="left ipt-img">
                <img src="../../../static/image/e_8.png" alt="">
              </div>
              <div class="ipt-box">
                <input type="text" v-model="code" placeholder="请输入验证码"/>
              </div>
            </div>
            <div class="clear"></div>
          </div>
          <div class="form-item login_input">
            <div class="shadow-c">
              <div class="left ipt-img">
                <img src="../../../static/image/e_3.png" alt="">
              </div>
              <div class="ipt-box">
                <input type="password" v-model="setPass" placeholder="密码 6-16位"/>
              </div>
              <div class="clear"></div>
            </div>
          </div>
          <div class="form-item login_input">
            <div class="shadow-c">
              <div class="left ipt-img">
                <img src="../../../static/image/e_4.png" alt="">
              </div>
              <div class="ipt-box">
                <input type="password" v-model="aginPass" placeholder="确认密码"/>
              </div>
              <div class="clear"></div>
            </div>
          </div>
          <div class="form-item agreen-box">
            <div class="left">
              <input @click="agree = !agree" type="checkbox">
              <span class="ready">我已阅读并同意</span>
              <span @click="getAgreement" class="agreenment">《用户协议》</span>
            </div>
            <!--<div @click="$router.push('/Login/LoginByPass')" class="right has-account">-->
              <!--已有账号-->
            <!--</div>-->
            <div class="clear"></div>
          </div>
          <div @click="register" class="form-item logo-btn">
            注册
          </div>
          <div style="padding-top: 10px;" @click="$router.push('/Login/LoginByPass')" class="right has-account">
            已有账号
          </div>
          <div class="clear"></div>
        </div>
        <div v-else class="change-success">
        <div>
          <img src="../../../static/image/e_0.png">
        </div>
        <div class="congratulations">
          恭喜您，注册成功!
        </div>
        <div>
          <a @click="$router.push('/Login/LoginByPass')" href="javascript: void(0)" class="go-logo">
            去登录
          </a>
        </div>
      </div>
      </div>
    <div v-show="lookAgreement" class="cover">
      <div class="agreenment-box">
        <div class="agreenment-bg">
          <h3>
            《平行车用户协议书》
          </h3>
          <div class="content" v-html="agreeContent">
          </div>
          <div @click="lookAgreement = false" class="cancel">
            <img src="../../../static/image/cuowu.png">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'LoginByPass',
    data () {
      return {
        codeText: '获取验证码',
        hasSend: false,
        regSuccess: false,
        lookAgreement: false,
        agree: false,
        mobile: '',
        code: '',
        setPass: '',
        aginPass: '',
        agreeContent: ''
      }
    },
    methods: {
      // 获取验证码
      getCode: function () {
        let that = this
        let mobile = that.mobile
        if (mobile === '') {
          that.$vux.toast.show({
            text: '请输入手机号码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (!that.isMobile(mobile)) {
          that.$vux.toast.show({
            text: '手机号有误',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (that.hasSend) {
          return false
        }
        that.$chaos.ajax({
          loading: '发送中...',
          url: '/Index/sendRegisterCode',
          data: {
            mobile: mobile
          },
          callback: function (type, res) {
            if (type === 'success') {
              that.codeText = '60s后重发'
              that.hasSend = true
              let timer = 60
              let text = 's后重发'
              let intval = setInterval(function () {
                timer--
                if (timer <= 0) {
                  that.codeText = '重新发送'
                  that.hasSend = false
                  clearInterval(intval)
                } else {
                  if (timer < 10) {
                    that.codeText = '0' + timer + text
                  } else {
                    that.codeText = timer + text
                  }
                }
              }, 1000)
            }
          }
        })
      },

      // 注册
      register: function () {
        let that = this
        let code = that.code
        let mobile = that.mobile
        let setPass = that.setPass
        let aginPass = that.aginPass
        if (mobile === '') {
          that.$vux.toast.show({
            text: '请输入手机号码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (!that.isMobile(mobile)) {
          that.$vux.toast.show({
            text: '手机号有误',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (code === '') {
          that.$vux.toast.show({
            text: '请输入验证码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (setPass === '') {
          that.$vux.toast.show({
            text: '请输入密码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (setPass.length < 6 || setPass.length > 16) {
          that.$vux.toast.show({
            text: '密码要求6-16位',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (aginPass !== setPass) {
          that.$vux.toast.show({
            text: '两次输入的密码不一致',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (!that.agree) {
          that.$vux.toast.show({
            text: '请勾选同意用户协议',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        that.$chaos.ajax({
          loading: '正在注册',
          url: '/Index/mobileRegister',
          data: {
            mobile: mobile,
            code: code,
            pass: setPass,
            pass_bak: aginPass
          },
          callback: function (type, res) {
            if (type === 'success') {
              that.regSuccess = true
            }
          }
        })
      },

      // 获取用户协议
      getAgreement: function () {
        let that = this
        that.$chaos.ajax({
          url: '/Index/getLoginAgreement',
          callback: function (type, res) {
            if (type === 'success') {
              that.agreeContent = res.result.content
              that.lookAgreement = true
            }
          }
        })
      }
    },
    created () {
      this.$emit('changeTitle', '注册')
    }
  }
</script>

<style scoped>
  .has-account{
    cursor: pointer
  }
  .has-account:hover{
    color: #007aff;
  }
</style>
